<template>
  <div>
    <component-head></component-head>
    <div class="content" v-if="logged">
      <van-button @click="$router.push('/login')" class="phone" type="danger">手机号快捷登录</van-button>
      <van-button @click="$router.push('/login')" class="email" type="danger">邮箱账号登录</van-button>
    </div>
    <div class="loginContent">
      
      <van-button class="logging" @click="clearinfo" type="danger">退出登录</van-button>
    </div>
    
    <mybarba></mybarba>
  </div>
</template>

<script>
import mybarba from '@/components/mybarba'
import ComponentHead from '@/views/home/components/ComponentHead'
import { Dialog } from 'vant'
export default {
  components: {
    mybarba,
    ComponentHead
  },
  created () {
    this.JudgeLogin()
  },
  data () {
    return {
      logged: ''
    }
  },
  methods: {
    JudgeLogin () {
      //获取tocken判断是否已经登录
      this.logged = !localStorage.getItem('tocken')
    },
    // 退出登录
    clearinfo () {
      localStorage.clear()
      Dialog.confirm({
        message: '确认要退出登录吗？',
      })
        .then(() => {
          this.$router.push('/home')
        })
      
    }
  }
}
</script>

<style lang="scss" scoped>
  .content{
    margin: 46px 0 50px 0;
    align-items: center;
    .phone{
      width: 100%;
      margin-top: 150px;
    }
    .email{
      width: 100%;
    }
  }
  .loginContent{
    margin: 46px 0 50px 0;
    position: relative;
    .logging{
      width: 100%;
      position: absolute;
      top: 400px;

    }
  }
</style>
